<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>Sass: Sass Basics</title>
    <meta content="Syntatically Awesome Style Sheets" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="./css/main.css" rel="stylesheet">
</head>
<body class="guide">
<div class="page">
    <div class="alert stickers">
        <div class="container">
            <p>
                <strong>Your laptop needs more Sass.</strong>
                <a href="http://devswag.com/products/sass-stickers-4">Grab a set of Sass stickers now</a>. </p>
        </div>
    </div>
    <div class="pop-stripe"></div>
    <header class="banner" role="banner">
        <div class="container">
            <h1 class="site-brand">
                <a href="/">
                    <img height="48" alt="Sass" src="./images/logo.svg">
                </a>
            </h1>
            <nav class="navigation collapse" role="navigation">
                <ul>
                    <li><a href="./install.html">Install</a></li>
                    <li><a href="./guide.html">Learn Sass</a></li>
                    <li><a href="http://blog.sass-lang.com/">Blog</a></li>
                    <li><a href="../documentation/file.SASS_REFERENCE.html">Documentation</a></li>
                    <li><a href="./community.html">Get Involved</a></li>
                    <li><a href="./libsass.html">libSass</a></li>
                </ul>
            </nav>
            <div class="banner-toggle">
                <button data-target=".navigation" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </header>
    <div class="page-header">
        <div class="container">
            <h1> Sass Basics </h1>
        </div>
    </div>
    <div class="body">
        <div class="container">
            <div class="content">
                <main class="main content-primary" role="main"><p class="introduction"> Before you can use Sass, you
                    need to set it up on your project. If you want to just browse here, go ahead, but we recommend you
                    go install Sass first. <a href="/install">Go here</a> if you want to learn how to get everything
                    setup. </p>
                    <ul class="slides">
                        <li id="topic-1"><h2>Preprocessing</h2>
                            <p>CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder
                                to maintain. This is where a preprocessor can help. Sass lets you use features that
                                don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
                                goodies that make writing CSS fun again.</p>
                            <p>Once you start tinkering with Sass, it will take your preprocessed Sass file and save it
                                as a normal CSS file that you can use in your web&nbsp;site.</p>
                            <p>The most direct way to make this happen is in your terminal. Once Sass is installed, you
                                can run <code>sass input.scss output.css</code> from your terminal. You can watch either
                                individual files or entire directories. In addition, you can watch folders or
                                directories with the <code>--watch</code> flag. An example of running Sass while
                                watching an entire directory is the following:</p> <pre
                                    class="highlight plaintext"><code>sass --watch app/sass:public/stylesheets
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-2" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>Variables</h2>
                            <p>Think of variables as a way to store information that you want to reuse throughout your
                                stylesheet. You can store things like colors, font stacks, or any CSS value you think
                                you'll want to reuse. Sass uses the <code>$</code> symbol to make something a variable.
                                Here's an example:</p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-2-SCSS" aria-labelledby="ui-id-1"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-2-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-1">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-2-Sass" aria-labelledby="ui-id-2" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-2-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-2">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-2-SCSS" aria-labelledby="ui-id-1"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="nv">$font-stack</span><span class="p">:</span> <span
                                    class="n">Helvetica</span><span class="o">,</span> <span
                                    class="nb">sans-serif</span><span class="p">;</span>
                                <span class="nv">$primary-color</span><span class="p">:</span> <span
                                        class="mh">#333</span><span class="p">;</span>

                                <span class="nt">body</span> <span class="p">{</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="nv">$font-stack</span><span class="p">;</span>
                                <span class="nl">color</span><span class="p">:</span> <span
                                        class="nv">$primary-color</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-2-Sass" aria-labelledby="ui-id-2"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="nv">$font-stack</span><span
                                    class="p">:</span> <span class="n">Helvetica</span><span class="o">,</span> <span
                                    class="nb">sans-serif</span>
                                <span class="nv">$primary-color</span><span class="p">:</span> <span
                                        class="mh">#333</span>

                                <span class="nt">body</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="nv">$font-stack</span>
                                <span class="nl">color</span><span class="p">:</span> <span
                                        class="nv">$primary-color</span>

                            </code></pre>
                            </div>
                            <p>When the Sass is processed, it takes the variables we define for the
                                <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our
                                variable values placed in the CSS. This can be extremely powerful when working with
                                brand colors and keeping them consistent throughout the&nbsp;site.</p> <pre
                                    class="highlight css"><code><span class="nt">body</span> <span class="p">{</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="n">Helvetica</span><span class="p">,</span> <span
                                        class="nb">sans-serif</span><span class="p">;</span>
                                <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span
                                        class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-3" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>Nesting</h2>
                            <p>When writing HTML you've probably noticed that it has a clear nested and visual
                                hierarchy. CSS, on the other hand, doesn't.</p>
                            <p>Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy
                                of your HTML. Be aware that overly nested rules will result in over-qualified CSS that
                                could prove hard to maintain and is generally considered bad practice.</p>
                            <p>With that in mind, here's an example of some typical styles for a
                                site's&nbsp;navigation:</p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-3-SCSS" aria-labelledby="ui-id-3"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-3-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-3">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-3-Sass" aria-labelledby="ui-id-4" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-3-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-4">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-3-SCSS" aria-labelledby="ui-id-3"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="nt">nav</span> <span class="p">{</span>
                                <span class="nt">ul</span> <span class="p">{</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">list-style</span><span class="p">:</span> <span
                                        class="nb">none</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">li</span> <span class="p">{</span> <span class="nl">display</span><span
                                        class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">a</span> <span class="p">{</span>
                                <span class="nl">display</span><span class="p">:</span> <span
                                        class="nb">block</span><span class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">6px</span> <span
                                        class="m">12px</span><span class="p">;</span>
                                <span class="nl">text-decoration</span><span class="p">:</span> <span
                                        class="nb">none</span><span class="p">;</span>
                                <span class="p">}</span>
                                <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-3-Sass" aria-labelledby="ui-id-4"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="nt">nav</span>
                                <span class="nt">ul</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span>
                                <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span>

                                <span class="nt">li</span>
                                <span class="nl">display</span><span class="p">:</span> <span
                                        class="n">inline-block</span>

                                <span class="nt">a</span>
                                <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">6px</span> <span
                                        class="m">12px</span>
                                <span class="nl">text-decoration</span><span class="p">:</span> <span
                                        class="nb">none</span>


                            </code></pre>
                            </div>
                            <p>You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are
                                nested inside the <code>nav</code> selector. This is a great way to organize your CSS
                                and make it more readable. When you generate the CSS you'll get something like&nbsp;this:
                            </p> <pre class="highlight css"><code><span class="nt">nav</span> <span class="nt">ul</span>
                                <span class="p">{</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">list-style</span><span class="p">:</span> <span
                                        class="nb">none</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">nav</span> <span class="nt">li</span> <span class="p">{</span>
                                <span class="nl">display</span><span class="p">:</span> <span
                                        class="n">inline-block</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">nav</span> <span class="nt">a</span> <span class="p">{</span>
                                <span class="nl">display</span><span class="p">:</span> <span
                                        class="nb">block</span><span class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">6px</span> <span
                                        class="m">12px</span><span class="p">;</span>
                                <span class="nl">text-decoration</span><span class="p">:</span> <span
                                        class="nb">none</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-4"><h2>Partials</h2>
                            <p>You can create partial Sass files that contain little snippets of CSS that you can
                                include in other Sass files. This is a great way to modularize your CSS and help keep
                                things easier to maintain. A partial is simply a Sass file named with a leading
                                underscore. You might name it something like <code>_partial.scss</code>. The underscore
                                lets Sass know that the file is only a partial file and that it should not be generated
                                into a CSS file. Sass partials are used with the <code>@import</code> directive.</p>
                            <hr>
                        </li>
                        <li id="topic-5" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>Import</h2>
                            <p>CSS has an import option that lets you split your CSS into smaller, more maintainable
                                portions. The only drawback is that each time you use <code>@import</code> in CSS it
                                creates another HTTP request. Sass builds on top of the current CSS <code>@import</code>
                                but instead of requiring an HTTP request, Sass will take the file that you want to
                                import and combine it with the file you're importing into so you can serve a single CSS
                                file to the web browser.</p>
                            <p>Let's say you have a couple of Sass files, <code>_reset.scss</code> and
                                <code>base.scss</code>. We want to import <code>_reset.scss</code> into
                                <code>base.scss</code>.</p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-5-SCSS" aria-labelledby="ui-id-5"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-5-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-5">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-5-Sass" aria-labelledby="ui-id-6" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-5-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-6">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-5-SCSS" aria-labelledby="ui-id-5"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="c1">// _reset.scss
</span>
                                <span class="nt">html</span><span class="o">,</span>
                                <span class="nt">body</span><span class="o">,</span>
                                <span class="nt">ul</span><span class="o">,</span>
                                <span class="nt">ol</span> <span class="p">{</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="p">}</span>
                            </code></pre> <pre class="highlight scss"><code><span class="c1">// base.scss
</span>
                                <span class="k">@import</span> <span class="s1">'reset'</span><span class="p">;</span>

                                <span class="nt">body</span> <span class="p">{</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="n">Helvetica</span><span class="o">,</span> <span
                                        class="nb">sans-serif</span><span class="p">;</span>
                                <span class="nl">background-color</span><span class="p">:</span> <span class="mh">#efefef</span><span
                                        class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-5-Sass" aria-labelledby="ui-id-6"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="c1">// _reset.sass
</span>
                                <span class="nt">html</span><span class="o">,</span>
                                <span class="nt">body</span><span class="o">,</span>
                                <span class="nt">ul</span><span class="o">,</span>
                                <span class="nt">ol</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span>

                            </code></pre> <pre class="highlight sass"><code><span class="c1">// base.sass
</span>
                                <span class="k">@import</span> <span class="s">reset</span>

                                <span class="nt">body</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="n">Helvetica</span><span class="o">,</span> <span
                                        class="nb">sans-serif</span>
                                <span class="nl">background-color</span><span class="p">:</span> <span class="mh">#efefef</span>

                            </code></pre>
                            </div>
                            <p>Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When
                                you import a file you don't need to include the file extension <code>.scss</code>. Sass
                                is smart and will figure it out for you. When you generate the CSS you'll&nbsp;get:</p> <pre
                                    class="highlight css"><code><span class="nt">html</span><span class="o">,</span>
                                <span class="nt">body</span><span class="o">,</span> <span class="nt">ul</span><span
                                        class="o">,</span> <span class="nt">ol</span> <span class="p">{</span>
                                <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">body</span> <span class="p">{</span>
                                <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span
                                        class="n">Helvetica</span><span class="p">,</span> <span
                                        class="nb">sans-serif</span><span class="p">;</span>
                                <span class="nl">background-color</span><span class="p">:</span> <span
                                        class="m">#efefef</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-6" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>Mixins</h2>
                            <p>Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor
                                prefixes that exist. A mixin lets you make groups of CSS declarations that you want to
                                reuse throughout your site. You can even pass in values to make your mixin more
                                flexible. A good use of a mixin is for vendor prefixes. Here's an example for <code>border-radius</code>.
                            </p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-6-SCSS" aria-labelledby="ui-id-7"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-6-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-7">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-6-Sass" aria-labelledby="ui-id-8" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-6-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-8">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-6-SCSS" aria-labelledby="ui-id-7"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="k">@mixin</span> <span class="nf">border-radius</span><span
                                    class="p">(</span><span class="nv">$radius</span><span class="p">)</span> <span
                                    class="p">{</span>
                                <span class="na">-webkit-border-radius</span><span class="p">:</span> <span class="nv">$radius</span><span
                                        class="p">;</span>
                                <span class="na">-moz-border-radius</span><span class="p">:</span> <span class="nv">$radius</span><span
                                        class="p">;</span>
                                <span class="na">-ms-border-radius</span><span class="p">:</span> <span class="nv">$radius</span><span
                                        class="p">;</span>
                                <span class="nl">border-radius</span><span class="p">:</span> <span
                                        class="nv">$radius</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.box</span> <span class="p">{</span> <span class="k">@include</span>
                                <span class="nd">border-radius</span><span class="p">(</span><span class="m">10px</span><span
                                        class="p">);</span> <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-6-Sass" aria-labelledby="ui-id-8"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="nf">=border-radius</span><span
                                    class="p">(</span><span class="nv">$radius</span><span class="p">)</span>
                                <span class="na">-webkit-border-radius</span><span class="p">:</span> <span class="nv">$radius</span>
                                <span class="na">-moz-border-radius</span><span class="p">:</span> <span class="nv">$radius</span>
                                <span class="na">-ms-border-radius</span><span class="p">:</span> <span class="nv">$radius</span>
                                <span class="nl">border-radius</span><span class="p">:</span> <span
                                        class="nv">$radius</span>

                                <span class="nc">.box</span>
                                <span class="nd">+border-radius</span><span class="p">(</span><span
                                        class="m">10px</span><span class="p">)</span>
                            </code></pre>
                            </div>
                            <p>To create a mixin you use the <code>@mixin</code> directive and give it a name. We've
                                named our mixin <code>border-radius</code>. We're also using the variable
                                <code>$radius</code> inside the parentheses so we can pass in a radius of whatever we
                                want. After you create your mixin, you can then use it as a CSS declaration starting
                                with <code>@include</code> followed by the name of the mixin. When your CSS is generated
                                it'll look like this:</p> <pre class="highlight css"><code><span class="nc">.box</span>
                                <span class="p">{</span>
                                <span class="nl">-webkit-border-radius</span><span class="p">:</span> <span class="m">10px</span><span
                                        class="p">;</span>
                                <span class="nl">-moz-border-radius</span><span class="p">:</span> <span
                                        class="m">10px</span><span class="p">;</span>
                                <span class="nl">-ms-border-radius</span><span class="p">:</span> <span
                                        class="m">10px</span><span class="p">;</span>
                                <span class="nl">border-radius</span><span class="p">:</span> <span
                                        class="m">10px</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-7" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>
                            Extend/Inheritance</h2>
                            <p>This is one of the most useful features of Sass. Using <code>@extend</code> lets you
                                share a set of CSS properties from one selector to another. It helps keep your Sass very
                                DRY. In our example we're going to create a simple series of messaging for errors,
                                warnings and successes.</p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-7-SCSS" aria-labelledby="ui-id-9"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-7-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-9">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-7-Sass" aria-labelledby="ui-id-10" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-7-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-10">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-7-SCSS" aria-labelledby="ui-id-9"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="nc">.message</span> <span class="p">{</span>
                                <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span
                                        class="nb">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span
                                        class="p">;</span>
                                <span class="nl">color</span><span class="p">:</span> <span class="mh">#333</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.success</span> <span class="p">{</span>
                                <span class="k">@extend</span> <span class="nc">.message</span><span class="p">;</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">green</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.error</span> <span class="p">{</span>
                                <span class="k">@extend</span> <span class="nc">.message</span><span class="p">;</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span class="no">red</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.warning</span> <span class="p">{</span>
                                <span class="k">@extend</span> <span class="nc">.message</span><span class="p">;</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">yellow</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-7-Sass" aria-labelledby="ui-id-10"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="nc">.message</span>
                                <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span
                                        class="nb">solid</span> <span class="mh">#ccc</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span>
                                <span class="nl">color</span><span class="p">:</span> <span class="mh">#333</span>


                                <span class="nc">.success</span>
                                <span class="k">@extend</span> <span class="nc">.message</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">green</span>


                                <span class="nc">.error</span>
                                <span class="k">@extend</span> <span class="nc">.message</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span class="no">red</span>


                                <span class="nc">.warning</span>
                                <span class="k">@extend</span> <span class="nc">.message</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">yellow</span>

                            </code></pre>
                            </div>
                            <p>What the above code does is allow you to take the CSS properties in <code>.message</code>
                                and apply them to <code>.success</code>, <code>.error</code>, &amp;
                                <code>.warning</code>. The magic happens with the generated CSS, and this helps you
                                avoid having to write multiple class names on HTML elements. This is what it looks&nbsp;like:
                            </p> <pre class="highlight css"><code><span class="nc">.message</span><span
                                    class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span
                                    class="nc">.error</span><span class="o">,</span> <span class="nc">.warning</span>
                                <span class="p">{</span>
                                <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span
                                        class="nb">solid</span> <span class="m">#cccccc</span><span class="p">;</span>
                                <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span
                                        class="p">;</span>
                                <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.success</span> <span class="p">{</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">green</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.error</span> <span class="p">{</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span class="no">red</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nc">.warning</span> <span class="p">{</span>
                                <span class="nl">border-color</span><span class="p">:</span> <span
                                        class="no">yellow</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            <hr>
                        </li>
                        <li id="topic-8" class="ui-tabs ui-widget ui-widget-content ui-corner-all"><h2>Operators</h2>
                            <p>Doing math in your CSS is very helpful. Sass has a handful of standard math operators
                                like <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, and <code>%</code>.
                                In our example we're going to do some simple math to calculate widths for an
                                <code>aside</code> &amp; <code>article</code>.</p>
                            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                                role="tablist">
                                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab"
                                    tabindex="0" aria-controls="topic-8-SCSS" aria-labelledby="ui-id-11"
                                    aria-selected="true" aria-expanded="true"><a href="#topic-8-SCSS"
                                                                                 class="ui-tabs-anchor"
                                                                                 role="presentation" tabindex="-1"
                                                                                 id="ui-id-11">SCSS</a></li>
                                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1"
                                    aria-controls="topic-8-Sass" aria-labelledby="ui-id-12" aria-selected="false"
                                    aria-expanded="false"><a href="#topic-8-Sass" class="ui-tabs-anchor"
                                                             role="presentation" tabindex="-1" id="ui-id-12">Sass</a>
                                </li>
                            </ul>
                            <div id="topic-8-SCSS" aria-labelledby="ui-id-11"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="false"><h3>SCSS Syntax</h3> <pre class="highlight scss"><code><span
                                    class="nc">.container</span> <span class="p">{</span> <span
                                    class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span
                                    class="p">;</span> <span class="p">}</span>


                                <span class="nt">article</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="s2">"main"</span><span class="o">]</span> <span
                                        class="p">{</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span
                                        class="p">;</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">600px</span> <span
                                        class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span
                                        class="m">100%</span><span class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">aside</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="s2">"complementary"</span><span
                                        class="o">]</span> <span class="p">{</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span
                                        class="p">;</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">300px</span> <span
                                        class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span
                                        class="m">100%</span><span class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                            </div>
                            <div id="topic-8-Sass" aria-labelledby="ui-id-12"
                                 class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel"
                                 aria-hidden="true" style="display: none;"><h3>Sass Syntax</h3> <pre
                                    class="highlight sass"><code><span class="nc">.container</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span>

                                <span class="nt">article</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="s2">"main"</span><span class="o">]</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">600px</span> <span
                                        class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span
                                        class="m">100%</span>


                                <span class="nt">aside</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="s2">"complementary"</span><span
                                        class="o">]</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">300px</span> <span
                                        class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span
                                        class="m">100%</span>

                            </code></pre>
                            </div>
                            <p>We've created a very simple fluid grid, based on 960px. Operations in Sass let us do
                                something like take pixel values and convert them to percentages without much hassle.
                                The generated CSS will look like:</p> <pre class="highlight css"><code><span class="nc">.container</span>
                                <span class="p">{</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">article</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="err">"</span><span class="nt">main</span><span
                                        class="err">"</span><span class="o">]</span> <span class="p">{</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span
                                        class="p">;</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">62.5%</span><span
                                        class="p">;</span>
                                <span class="p">}</span>

                                <span class="nt">aside</span><span class="o">[</span><span class="nt">role</span><span
                                        class="o">=</span><span class="err">"</span><span
                                        class="nt">complementary</span><span class="err">"</span><span
                                        class="o">]</span> <span class="p">{</span>
                                <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span
                                        class="p">;</span>
                                <span class="nl">width</span><span class="p">:</span> <span class="m">31.25%</span><span
                                        class="p">;</span>
                                <span class="p">}</span>
                            </code></pre>
                        </li>
                    </ul>
                </main>
                <div class="complementary content-secondary" role="complementary"><h3>Topics</h3>
                    <ul class="anchors">
                        <li><a href="#topic-1">Preprocessing</a></li>
                        <li><a href="#topic-2">Variables</a></li>
                        <li><a href="#topic-3">Nesting</a></li>
                        <li><a href="#topic-4">Partials</a></li>
                        <li><a href="#topic-5">Import</a></li>
                        <li><a href="#topic-6">Mixins</a></li>
                        <li><a href="#topic-7">Inheritance</a></li>
                        <li><a href="#topic-8">Operators</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="alert release">
        <div class="container">
            <ul>
                <li>Current Release: <span class="release-name">Selective Steve (3.4.22)</span></li>
                <li><a href="../documentation/file.SASS_CHANGELOG.html">Release Notes</a></li>
                <li><a href="https://github.com/sass/sass">Fork on Github</a></li>
                <li><a href="implementation">Implementation Guide</a></li>
            </ul>
        </div>
    </div>
</div>
<footer class="contentinfo" role="contentinfo">
    <nav class="container">
        <ul>
            <li class="contentinfo-legal"><p>Sass © 2006–2015 <a href="http://www.hamptoncatlin.com/">Hampton Catlin</a>,
                <a href="http://nex-3.com/">Natalie Weizenbaum</a>, <a href="http://chriseppstein.github.io/">Chris&nbsp;Eppstein</a>,
                and&nbsp;numerous&nbsp;contributors.</p>
                <p>It is available for use and modification under the <a
                        href="http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html">MIT&nbsp;License</a>.</p></li>
            <li class="contentinfo-tools">
                <ul>
                    <li><a href="https://github.com/sass">Sass on GitHub</a></li>
                    <li><a href="https://github.com/sass/sass-site">Website Repo</a></li>
                    <li><a href="/styleguide">Style Guide</a></li>
                    <li><a href="/community-guidelines">Community Guidelines</a></li>
                </ul>
            </li>
            <li class="contentinfo-social">
                <a class="twitter-follow-button" data-show-count="false" data-size="large"
                   href="https://twitter.com/SassCSS">Follow @SassCSS</a>
            </li>
        </ul>
    </nav>
</footer>
</body>
</html>